<template lang="pug">
.wrap(v-if="true")
 
  .headBox 
     p.iconfont.icon-fanhui(@click="back")
     h3 商品评论
     p.seek.iconfont.icon-sousuo
  .listBox
    span(
      v-for="(d, i) in titleList",
      :class="{ title: titleIndex == i }",
      @click="titleTab(d, i)"
    ) {{ d }}
  .main
    setList.setList(v-for="item in list", :list="item")
  .footer
    .comment(@click="pckcherShow = true") 评论{{ commentLength }}
    .pent(@click="showShare = true") 转发
    //- van-cell(title="转发" )
    //- @click="inputTab"
  van-share-sheet(v-model="showShare" :options="options")
  van-popup(v-model="pckcherShow" position="bottom" :style="{ height: '30%' }")
    .contenter
      van-uploader(v-model="fileList" multiple)
      .box
        .top
          input(type="text", v-model="commentTxt", placeholder="请输入评论")
        .bottom
          van-button(type="default") 取消
          van-button(type="primary" @click="inputTab") 发送
</template>
<script>
import setList from "../components/setList.vue";
import imageList from './imageList'
import Vue from 'vue';
import { ShareSheet,Cell,Popup,Uploader,Button,Notify} from 'vant';
Vue.use(ShareSheet);
Vue.use(Cell)
Vue.use(Popup)
Vue.use(Uploader)
Vue.use(Button)
Vue.use(Notify)
export default {
  data() {
    return {
      list: [],
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
      fileList:[],
      showShare: false,
      titleList: [
        "全部",
        "有图",
        "颜值很高",
        "手感一流",
        "运行稳定",
        "价格实惠",
      ],
      pckcherShow: false,
      titleIndex: 0, //当前点击的title下标
      dataTitle: "", //定义接受的值
      commentTxt: "",
      time: new Date,
      commentLength: null,
      imageList,
      nameList: ["a", "b"],
    };
  },
  components: {
    setList,
  },
  computed:{
    fileListTo(){
      let c = '';
      this.fileList.forEach(item=>{
        c+=item.content
      })
      return c
    }
  },
  methods: {
    // error(){
    //   if(!this.commentTxt){
    //     Notify({ type: 'danger', message: '评论不能为空' });
    //     return
    //   }
    //   this.pckcherShow = true
    // },
    titleTab(d, index) {
      this.titleIndex = index;
      this.dataTitle = d;
      console.log(d);
      console.log(this.titleIndex);
    },
    back(){
      this.$router.go(-1)
    },
    fn(arr) {
      return (arr = arr.map((item) => {
        if (item.covers != null) {
          return {
            id: item.id,
            covers: item.covers.split(","),
            userimg: item.userimg,
            time: item.time,
            username: item.username,
            content: item.content,
            type: item.type,
          };
        } else {
          return {
            id: item.id,
            covers: null,
            userimg: item.userimg,
            time: item.time,
            username: item.username,
            content: item.content,
            type: item.type,
          };
        }
      }));
    },
    inputTab() {
      // this.commentTxt

      if (this.commentTxt != "") {
        let min = this.round(0, this.imageList.length - 1);
        let mm = this.round(min, this.imageList.length);
        console.log("----------", ...this.imageList.slice(min, mm));
        const obj = {
          content: this.commentTxt,
          covers: this.imageList.slice(min, mm).join(","),
          type: this.titleList[this.round(1, this.titleList.length)],
          userimg: this.imageList[this.round(0, this.imageList.length)],
          username: "yuiopt" + this.round(0, 80),
        };
        this.$http.get("http://192.168.43.168:8082/user/add", {
          params: obj,
        });
        console.log(obj);
        this.$router.go(0);
        this.content = "";
      }
    },
    round(max, min) {
      // 随机数
      return parseInt(Math.random() * (max - min + 1) + min, 10);
    },
  },
  watch: {
    dataTitle: {
      deep: true,
      handler(a) {
        if (a != "全部") {
          console.log(a, "参数");
          this.$http
            .get(`http://192.168.43.168:8082/user/userlistfilter?type=${a}`)
            .then(({ data }) => {
              this.list = this.fn(data).reverse();
            });
        } else {
          this.$http
            .get(`http://192.168.43.168:8082/user/userlist`)
            .then(({ data }) => {
              this.list = this.fn(data).reverse();
            });
        }
      },
    },
  },

  created() {
    this.$http
      .get("http://192.168.43.168:8082/user/userlist")
      .then(({ data }) => {
        this.list = this.fn(data).reverse();
        this.commentLength = this.list.length;
        console.log(data[0].covers);
      });
    console.log(this.round(0, 10));
  console.log(new Date,"时间")
    // this.inputTab()
  },
};
</script>
<style lang="sass">
$bg: rgb(242,242,242)
.wrap
  width: 3.75rem
  background: $bg
  .headBox
    width: 100%
    height: .45rem
    background: $bg
    position: fixed
    left: 0
    top: 0
    text-align: center
    line-height: .45rem
    align-items: center
    display: flex
    justify-content: space-between
    padding:0 .2rem
  .listBox
    width: 100%
    height: 1 rem
    background: #fff
    margin-top: .45rem
    display: flex
    flex-wrap: wrap
    box-sizing: border-box
    padding: 0 .15rem
    span
      font-size: 0.12rem
      padding: 0 .2rem
      background: rgb(252,238,235)
      height: .3rem
      line-height: .3rem
      border-radius: .2rem
      margin-left: .05rem
      color: #000
      margin-bottom: .09rem
      margin-top: .05rem
      &.title
        background: rgb(236,88,41)
        color: #fff
  &>.main
    width: 100%
    padding-bottom: .5rem
  .footer
    width: 100%
    height: .5rem
    background: $bg
    position: fixed
    bottom: 0
    left: 0
    display: flex
    align-items: center
    div
      margin-left: .15rem
  .contenter
    padding: .3rem
    .box 
      input
        width: 2.4rem
        height: 0.32rem
        border-radius: 50px
        box-sizing: border-box
        padding: .1rem
        margin-left: .12rem
        border: 1px solid #ccc
      .bottom
        display: flex
        justify-content: space-between
</style>
